<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/person.css"/>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vant.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="html5plus://ready"></script>
		<style type="text/css">
			.van-swipe-cell__right{
				background-color: red;
				width: 80px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-nav-bar id="header" v-if="show" title="我的收货地址" right-text="确定" left-arrow  @click-left="back" @click-right="confirm"></van-nav-bar>
					<van-nav-bar id="header" v-else title="我的收货地址" right-text="" left-arrow  @click-left="back" @click-right="onDel"></van-nav-bar>
				</van-row>
			</header>
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<section>
				<van-checkbox-group v-model="result" v-bind:max="count">
					<van-cell-group v-for="(item,index) in addressLists">
						<van-swipe-cell :right-width="65" >
							<span style="position: absolute;top: 20px;left: 305px;font-size: 14px;color: gray;border-left:1px solid gray;padding-left: 10px;"@click="onEdit(item)">
								编辑
							</span>
							<van-checkbox :key="item.id" :name="item.id" checked-color="red" @click="change(item.id)" style="padding-left:15px;">
								<van-cell :label="item.address" >
									<span slot="title">{{item.name}}，{{item.tel}}</span>
								</van-cell>
							</van-checkbox>
						<span slot="right" @click="onDel(item.id)" style="background-color: red;position: relative;top:20px;left: 20px;">删除</span>
						</van-swipe-cell>
					</van-cell-group>
				</van-checkbox-group>
			</section>
			</van-pull-refresh>
			<van-button type="danger" size="large" style="position: fixed;bottom: 0px;" @click="onEdit">新增地址</van-button>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					key:"",
					show:false,
					isLoading:false,
					addressLists:[],
					chosenAddressId:"",
					result:[],
					count:0,
					x:0,
				},
				mounted(){
					var _this=this;
					_this.key=localStorage.getItem("keys");
					var wv = plus.webview.currentWebview();
					plus.key.addEventListener("backbutton",function(){  
						var wv = plus.webview.currentWebview();
						plus.webview.close(wv.id);
					}); 
					_this.$toast.loading({
						duration: 0,       // 持续展示 toast
						forbidClick: true, // 禁用背景点击
						loadingType: 'spinner',
						mask:true,
						message: '获取地址列表中,请稍后...'
					});
					setTimeout(function(){
						_this.$toast.clear();
					},500);
					if(wv.Id==2){
						_this.show=true;
					};
					ajax({//获取收货地址
						url:"http://dsapi.ysd3g.com/API/MyShippingAddressList",
						dataType:"JSONP",
						data:{key:_this.key},
						success:function(res){
							console.log(res);
							_this.addressLists=res.Data;
							if(res.Data.length){
								for(var i=0;i<res.Data.length;i++){
									var arr ={i};
									_this.result.push(arr);
								}
							}else{
								_this.result=[0];
							}
							_this.count=_this.result.length+1;
						},
					});
				},
				methods:{
					back(){
						var wv=plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
					onRefresh(){
						plus.webview.currentWebview().reload(false);
					},
					change(i){
						var _this=this;
						if(_this.x==0){
							_this.chosenAddressId=i;	
						}
						else if(_this.x==i){
							_this.chosenAddressId="",
							_this.x=0;
						}
					},
					onDel(i){//只能单个删除
						var _this=this;
						this.$dialog.confirm({
							message:"确认删除地址？"
						}).then(() => {
							ajax({
								url:"http://dsapi.ysd3g.com/api/DeleteShippingAddress",
								dataType:"JSONP",
								data:{
									key:_this.key,
									addressId:i
								},
								success:function(res){
									if(res.Error){
										console.log(res);
										_this.$toast.fail(res.Msg);
									}
									else{
										_this.$toast.success("删除成功");
										plus.webview.currentWebview().reload(false);
									}
								}
							});
						}).catch(() => {
							// on cancel
						});
					},
					onAdd(){
						plus.webview.create("./Editaddress.html","Edit");
						plus.webview.show("Edit");
					},
					onEdit(i){
						console.log(i.id);//获取当前编辑地址的id
						var x=i.id;
						plus.webview.create("./Editaddress.html","Edit",{},{Id:x});
						plus.webview.show("Edit");
					},
					confirm(){
						var _this=this;
						console.log(_this.chosenAddressId);
						localStorage.setItem("addressId",_this.chosenAddressId);
						plus.webview.getWebviewById("pay").reload(true);
						var wv=plus.webview.currentWebview();
						plus.webview.close(wv.id);
					},
				}
			})
		</script>
	</body>
</html>
